<template>
  <div class="mheader">
       <div class="icon"></div>
       <div class="text">Chicken Music</div>
       <router-link tag="div" class="mine" to="/user"></router-link>
       <i class="icon-mine"></i>
  </div>
</template>

<script>

export default {
  name: 'mheader',
  data () {
    return {
      
    }
  }
 

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less"  scoped>
 @import '../../common/stylus/variable.less';
  .mheader{
  	position: relative;
  	height: 44px;
  	text-align: center;
  	color: @color-theme;
  	font-size:0;
  	.icon{
  		display: inline-block;
  		vertical-align: top;
  		margin-top: 6px;
  		width: 30px;
  		height: 32px;
  		margin-right: 9px;
  		background: url(img/logo@3x.png) ;
  		background-size: 30px 32px;
  	}
  	.text{
  		display: inline-block;
  		vertical-align: top;
  		line-height: 44px;
  		font-size: @font-size-large;
  	}
  	.mine{
  		position: absolute;
  		top: 0;
  		right: 0;
  		.icon-mine{
  			display: block;
  			padding: 12px;
  			font-size: 20px;
  			color:@color-theme;
  		}
  	}
  	
  	
  }
  

</style>
